<template>
    <div class="designupdate">
        <div class="designupdate-header">
            <h4>
                <i class="iconfont icon-zuojiantou" @click="goBack"></i>设计稿上传
            </h4>
            <div class="upload" v-if="checkPermi(['system:measurement:design'])">
                <ImageUpload :limit="6" :isShowTip="false" @update:modelValue="handlerModelValue" :fileType="fileType"
                    :modelValue="modelValue" />
                <el-dialog v-model="dialogVisible">
                    <img w-full :src="dialogImageUrl" alt="Preview Image" />
                </el-dialog>
            </div>
            <div class="uploadMask" v-else>
                暂无权限上传图片
            </div>
            <!-- 表格 -->
            <TableCom :boder="true" :dataTable="dataTable" @createTable="createTable" @deleteRow="deleteRow"
                :uploadeExls="true" @excelTable="excelTable" />
        </div>

        <div class="business">
            <!-- 测量但 -->
            <el-form :model="businessForm" label-width="auto" :rules="rules" ref="ruleFormRef">
                <div class="business-form">
                    <h4> 测量单</h4>
                    <div class="form-box">
                        <el-form-item label="终端名称" prop="terminalName" required>
                            <el-input v-model="businessForm.terminalName" placeholder="请输入终端名称" :disabled="true" />
                        </el-form-item>
                        <el-form-item label="客户名称" prop="customerName" required>
                            <el-select v-model="businessForm.customerName" placeholder="请输入客户名称" :disabled="true">
                                <el-option v-for="item in customerList" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="厂家负责人" prop="manufacturerContact">
                            <el-input v-model="businessForm.manufacturerContact" placeholder="请输入厂家负责人" :disabled="true" />
                        </el-form-item>
                        <el-form-item label="经营测量人员" prop="businessSurveyorName">
                            <el-input v-model="businessForm.businessSurveyorName" placeholder="请选择测量人员" disabled />
                        </el-form-item>
                        <el-form-item label="测量日期" prop="surveyDate" required>
                            <el-date-picker v-model="businessForm.surveyDate" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                                :disabled="true" placeholder="请选择测量日期" />
                        </el-form-item>
                        <el-form-item label="设计元素" prop="designElements" required>
                            <el-input v-model="businessForm.designElements" placeholder="请选择设计元素" :disabled="true" />
                        </el-form-item>
                        <el-form-item label="终端电话" class="terminalPhone" prop="terminalPhone" required>
                            <p>+86</p>
                            <el-input v-model="businessForm.terminalPhone" placeholder="请输入11位手机号码" :disabled="true" />
                        </el-form-item>
                        <el-form-item label="城管报备情况" prop="urbanManagementReport">
                            <el-select placeholder="请选择城管报备情况" v-model="businessForm.urbanManagementReport" clearable
                                disabled>
                                <el-option v-for="item in urbanManagementReportList" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="详细地址" prop="detailedAddress">
                            <el-input v-model="businessForm.detailedAddress" placeholder="请输入详细地址" :disabled="true" />
                        </el-form-item>
                        <el-form-item label="主线到招牌距离" class="config" prop="mainLineDistance">
                            <el-input v-model="businessForm.mainLineDistance" placeholder="请输入主线到招牌距离" :disabled="true" />
                            <p class="unit">CM</p>
                        </el-form-item>
                        <el-form-item label="预留输入框" prop="a" v-show="false">
                            <el-input v-model="businessForm.a" placeholder="请输入" :disabled="true" />
                        </el-form-item>
                        <el-form-item label="店面现场环境" class="shopEnvironment" prop="shopEnvironment">
                            <p class="shopEnvironmentLable">门头高地高度</p>
                            <el-input v-model="businessForm.shopEnvironment" placeholder="请输入" :disabled="true" />
                            <p class="unit">CM</p>
                        </el-form-item>
                        <el-form-item class="shopRadio">
                            <el-radio-group v-model="businessForm.shopRadio" :disabled="true">
                                <el-radio value="1" label="1">新开店</el-radio>
                                <el-radio value="2" label="2">已有店面改造</el-radio>
                                <el-radio value="3" label="3">其他</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="其他" prop="other">
                            <el-input v-model="businessForm.other" placeholder="请输入"
                                :disabled="businessForm.shopRadio != '3'" />
                        </el-form-item>
                    </div>
                </div>
                <div class="structuralDiagram">
                    <div class="title">
                        <h4>现场平面结构图</h4>
                        <span>需注明具体材质与尺寸</span>
                    </div>
                    <div class="form-box">
                        <el-form-item label="正面高（竖）" class="config" prop="frontHeight" v-if="optionModel == '固定-单片'">
                            <el-input v-model="businessForm.frontHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面宽（横）" class="config" prop="frontWidth" v-show="optionModel == '固定-单片'">
                            <el-input v-model="businessForm.frontWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面高（竖）" class="config" prop="frontHeight" v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="businessForm.frontHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面宽（横）" class="config" prop="frontWidth" v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="businessForm.frontWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水高度(竖)" class="config" prop="waterproofHeight"
                            v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="businessForm.waterproofHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水宽（横）" class="config" prop="waterproofWidth"
                            v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="businessForm.waterproofWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧高（竖）" class="config" prop="leftHeight" v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="businessForm.leftHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧宽（横）" class="config" prop="leftWidth" v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="businessForm.leftWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="右侧高（竖）" class="config" prop="rightHeight" v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="businessForm.rightHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="右侧宽（横）" class="config" prop="rightWidth" v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="businessForm.rightWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底高（竖）" class="config" prop="bottomHeight"
                            v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="businessForm.bottomHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底宽（横）" class="config" prop="bottomWidth" v-show="optionModel == '固定-四周厚度无包柱'">
                            <el-input v-model="businessForm.bottomWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水高度(竖)" class="config" prop="waterproofHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.waterproofHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水宽（横）" class="config" prop="waterproofWidth"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.waterproofWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣高（竖）" class="config" prop="doorHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.doorHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣宽（横）" class="config" prop="doorWidth" v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.doorWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面高（竖）" class="config" prop="frontHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.frontHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面宽（横）" class="config" prop="frontWidth"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.frontWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底高（竖）" class="config" prop="bottomHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.bottomHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底宽（横）" class="config" prop="bottomWidth"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.bottomWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧高（竖）" class="config" prop="leftHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.leftHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧宽（横）" class="config" prop="leftWidth" v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.leftWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="右侧高（竖）" class="config" prop="rightHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.rightHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="右侧宽（横）" class="config" prop="rightWidth"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.rightWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱一高（竖）" class="config" prop="columnOneHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.columnOneHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱一宽（横）" class="config" prop="columnOneWidth"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.columnOneWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱三高（竖）" class="config" prop="columnThreeHeight"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.columnThreeHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱三宽（横）" class="config" prop="columnThreeWidth"
                            v-show="optionModel == '固定-四周厚度+两个包柱'">
                            <el-input v-model="businessForm.columnThreeWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水高度(竖)" class="config" prop="waterproofHeight"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.waterproofHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水宽（横）" class="config" prop="waterproofWidth"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.waterproofWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣高（竖）" class="config" prop="doorHeight" v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.doorHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣宽（横）" class="config" prop="doorWidth" v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.doorWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面高（竖）" class="config" prop="frontHeight" v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.frontHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面宽（横）" class="config" prop="frontWidth" v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.frontWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底高（竖）" class="config" prop="bottomHeight" v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.bottomHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底宽（横）" class="config" prop="bottomWidth" v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.bottomWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧高（竖）" class="config" prop="leftHeight" v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.leftHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧宽（横）" class="config" prop="leftWidth" v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.leftWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="右侧高（竖）" class="config" prop="rightHeight" v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.rightHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="右侧宽（横）" class="config" prop="rightWidth" v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.rightWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱一高（竖）" class="config" prop="columnOneHeight"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.columnOneHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱一宽（横）" class="config" prop="columnOneWidth"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.columnOneWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱二高（竖）" class="config" prop="columnThreeHeight"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.columnTwoHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱二宽（横）" class="config" prop="columnThreeWidth"
                            v-show="optionModel == '多选-门头含包柱'">
                            <el-input v-model="businessForm.columnTwoWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水高度(竖)" class="config" prop="waterproofHeight"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.waterproofHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水宽（横）" class="config" prop="waterproofWidth"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.waterproofWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣高（竖）" class="config" prop="doorHeight" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.doorHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣宽（横）" class="config" prop="doorWidth" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.doorWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗玻璃高（竖）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.windowHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗玻璃宽（横）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.windowWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗上宽（横）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.windowTopWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗上高（竖）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.windowTopHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗左宽（横）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.windowLeftWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗左高（竖）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.windowLeftHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗右宽（横）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.windowRightWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗右高（竖）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.windowRightHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗下宽（横）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.windowBottomWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="橱窗下高（竖）" class="config" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.windowBottomHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="正面高（竖）" class="config" prop="frontHeight" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.frontHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面宽（横）" class="config" prop="frontWidth" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.frontWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底高（竖）" class="config" prop="bottomHeight" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.bottomHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底宽（横）" class="config" prop="bottomWidth" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.bottomWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧高（竖）" class="config" prop="leftHeight" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.leftHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧宽（横）" class="config" prop="leftWidth" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.leftWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="右侧高（竖）" class="config" prop="rightHeight" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.rightHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="右侧宽（横）" class="config" prop="rightWidth" v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.rightWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="包柱一高（竖）" class="config" prop="columnOneHeight"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.columnOneHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱一宽（横）" class="config" prop="columnOneWidth"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.columnOneWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱二高（竖）" class="config" prop="columnThreeHeight"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.columnTwoHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱二宽（横）" class="config" prop="columnThreeWidth"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.columnTwoWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱三高（竖）" class="config" prop="columnThreeHeight"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.columnThreeHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱三宽（横）" class="config" prop="columnThreeWidth"
                            v-show="optionModel == '多选-门头含橱窗'">
                            <el-input v-model="businessForm.columnThreeWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水高度(竖)" class="config" prop="waterproofHeight"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.waterproofHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="防水宽（横）" class="config" prop="waterproofWidth"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.waterproofWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣高（竖）" class="config" prop="doorHeight" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.doorHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="门楣宽（横）" class="config" prop="doorWidth" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.doorWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面高（竖）" class="config" prop="frontHeight" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.frontHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="正面宽（横）" class="config" prop="frontWidth" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.frontWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底高（竖）" class="config" prop="bottomHeight" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.bottomHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="下底宽（横）" class="config" prop="bottomWidth" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.bottomWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧高（竖）" class="config" prop="leftHeight" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.leftHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="左侧宽（横）" class="config" prop="leftWidth" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.leftWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="右侧高（竖）" class="config" prop="rightHeight" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.rightHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="右侧宽（横）" class="config" prop="rightWidth" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.rightWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>

                        <el-form-item label="包柱一高（竖）" class="config" prop="columnOneHeight"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnOneHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱一宽（横）" class="config" prop="columnOneWidth"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnOneWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱二高（竖）" class="config" prop="columnThreeHeight"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnTwoHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱二宽（横）" class="config" prop="columnThreeWidth"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnTwoWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱三高（竖）" class="config" prop="columnThreeHeight"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnThreeHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱三宽（横）" class="config" prop="columnThreeWidth"
                            v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnThreeWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱四高（竖）" class="config" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnFourHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱四宽（横）" class="config" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnFourWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱五高（竖）" class="config" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnFiveHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱五宽（横）" class="config" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnFiveWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱六高（竖）" class="config" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnSixHeight" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <el-form-item label="包柱六宽（横）" class="config" v-show="optionModel == '多选-多间门头'">
                            <el-input v-model="businessForm.columnSixWidth" disabled />
                            <p class="unit">m</p>
                        </el-form-item>
                        <div class="optionModel">

                            <el-form-item label="选取模板" class="config">
                                <el-select v-model="optionModel" disabled>
                                    <el-option v-for="item in optionModelList" :key="item.id" :label="item.imageName"
                                        :value="item.imageName" />
                                </el-select>
                            </el-form-item>

                            <div class="modleimage">
                                <el-image :src="optionModelUrl" lazy />
                                <!-- 固定 1 -->
                                <!-- 选择1固定图片的正面数据宽度 -->
                                <div v-show="optionModel == '固定-单片'">
                                    <span class="guding-one-zhengmianW">{{ businessForm.frontWidth }}</span>
                                    <!-- 选择1固定图片的正面数据高度 -->
                                    <span class="guding-one-zhengmianH">{{ businessForm.frontHeight }}</span>
                                </div>

                                <!-- 固定 2-->
                                <div v-show="optionModel == '固定-四周厚度无包柱'">
                                    <span class="guding-two-fangshuiW">{{ businessForm.waterproofWidth }}</span>
                                    <span class="guding-two-fangshuiH">{{ businessForm.waterproofHeight }}</span>
                                    <span class="guding-two-zuoceW">{{ businessForm.leftWidth }}</span>
                                    <span class="guding-two-zuoceH">{{ businessForm.leftHeight }}</span>
                                    <span class="guding-two-zhengmianW">{{ businessForm.frontWidth }}</span>
                                    <span class="guding-two-zhengmianH">{{ businessForm.frontHeight }}</span>
                                    <span class="guding-two-youceW">{{ businessForm.rightWidth }}</span>
                                    <span class="guding-two-youceH">{{ businessForm.rightHeight }}</span>
                                    <span class="guding-two-xiaceW">{{ businessForm.bottomWidth }}</span>
                                    <span class="guding-two-xiaceH">{{ businessForm.bottomHeight }}</span>
                                </div>

                                <!-- 固定-3 -->
                                <div v-show="optionModel == '固定-四周厚度+两个包柱'">
                                    <span class="guding-three-fangshuiW">{{ businessForm.waterproofWidth }}</span>
                                    <span class="guding-three-fangshuiH">{{ businessForm.waterproofHeight }}</span>
                                    <span class="guding-three-zhengmianW">{{ businessForm.frontWidth }}</span>
                                    <span class="guding-three-zhengmianH">{{ businessForm.frontHeight }}</span>
                                    <span class="guding-three-zuoceH">{{ businessForm.leftHeight }}</span>
                                    <span class="guding-three-zuoceW">{{ businessForm.leftWidth }}</span>
                                    <span class="guding-three-youceW">{{ businessForm.rightWidth }}</span>
                                    <span class="guding-three-youceH">{{ businessForm.rightHeight }}</span>
                                    <span class="guding-three-xiadiH">{{ businessForm.bottomHeight }}</span>
                                    <span class="guding-three-xiadiW">{{ businessForm.bottomWidth }}</span>
                                    <span class="guding-three-menmeiW">{{ businessForm.doorWidth }}</span>
                                    <span class="guding-three-menmeiH">{{ businessForm.doorHeight }}</span>
                                    <span class="guding-three-baozhuH">{{ businessForm.columnOneHeight }}</span>
                                    <span class="guding-three-baozhuW">{{ businessForm.columnOneWidth }}</span>
                                    <span class="guding-three-baozhu2W">{{ businessForm.columnThreeWidth }}</span>
                                    <span class="guding-three-baozhu2H">{{ businessForm.columnThreeHeight }}</span>
                                </div>

                                <!-- 多选-4 -->
                                <div v-if="optionModel == '多选-门头含包柱'">
                                    <span class="duoxuan-four-fangshuiW">{{ businessForm.waterproofWidth }}</span>
                                    <span class="duoxuan-four-fangshuiH">{{ businessForm.waterproofHeight }}</span>
                                    <span class="duoxuan-four-zhengmianW">{{ businessForm.frontWidth }}</span>
                                    <span class="duoxuan-four-zhengmianH">{{ businessForm.frontHeight }}</span>
                                    <span class="duoxuan-four-zuoceH">{{ businessForm.leftHeight }}</span>
                                    <span class="duoxuan-four-zuoceW">{{ businessForm.leftWidth }}</span>
                                    <span class="duoxuan-four-youceW">{{ businessForm.rightWidth }}</span>
                                    <span class="duoxuan-four-youceH">{{ businessForm.rightHeight }}</span>
                                    <span class="duoxuan-four-xiadiH">{{ businessForm.bottomHeight }}</span>
                                    <span class="duoxuan-four-xiadiW">{{ businessForm.bottomWidth }}</span>
                                    <span class="duoxuan-four-menmeiW">{{ businessForm.doorWidth }}</span>
                                    <span class="duoxuan-four-menmeiH">{{ businessForm.doorHeight }}</span>
                                    <span class="duoxuan-four-baozhuH">{{ businessForm.columnOneHeight }}</span>
                                    <span class="duoxuan-four-baozhuW">{{ businessForm.columnOneWidth }}</span>
                                    <span class="duoxuan-four-baozhu2W">{{ businessForm.columnTwoWidth }}</span>
                                    <span class="duoxuan-four-baozhu2H">{{ businessForm.columnTwoHeight }}</span>
                                </div>

                                <!-- 多选-5 -->
                                <div v-else-if="optionModel == '多选-门头含橱窗'">
                                    <span class="duoxuan-five-fangshuiW">{{ businessForm.waterproofWidth }}</span>
                                    <span class="duoxuan-five-fangshuiH">{{ businessForm.waterproofHeight }}</span>
                                    <span class="duoxuan-five-zhengmianW">{{ businessForm.frontWidth }}</span>
                                    <span class="duoxuan-five-zhengmianH">{{ businessForm.frontHeight }}</span>
                                    <span class="duoxuan-five-zuoceW">{{ businessForm.leftWidth }}</span>
                                    <span class="duoxuan-five-zuoceH">{{ businessForm.leftHeight }}</span>
                                    <span class="duoxuan-five-youceW">{{ businessForm.rightWidth }}</span>
                                    <span class="duoxuan-five-youceH">{{ businessForm.rightHeight }}</span>
                                    <span class="duoxuan-five-xiadiW">{{ businessForm.bottomWidth }}</span>
                                    <span class="duoxuan-five-xiadiH">{{ businessForm.bottomHeight }}</span>
                                    <span class="duoxuan-five-menmeiW">{{ businessForm.doorWidth }}</span>
                                    <span class="duoxuan-five-menmeiH">{{ businessForm.doorHeight }}</span>
                                    <span class="duoxuan-five-baozhuW">{{ businessForm.columnOneWidth }}</span>
                                    <span class="duoxuan-five-baozhuH">{{ businessForm.columnOneHeight }}</span>
                                    <span class="duoxuan-five-baozhu3W">{{ businessForm.columnThreeWidth }}</span>
                                    <span class="duoxuan-five-baozhu3H">{{ businessForm.columnThreeHeight }}</span>
                                    <span class="duoxuan-five-baozhu2W">{{ businessForm.columnTwoWidth }}</span>
                                    <span class="duoxuan-five-baozhu2H">{{ businessForm.columnTwoHeight }}</span>

                                    <span class="duoxuan-five-chuchuangT-W">{{ businessForm.windowTopWidth }}</span>
                                    <span class="duoxuan-five-chuchuangT-H">{{ businessForm.windowTopHeight }}</span>
                                    <span class="duoxuan-five-chuchuangL-W">{{ businessForm.windowLeftWidth }}</span>
                                    <span class="duoxuan-five-chuchuangL-H">{{ businessForm.windowLeftHeight }}</span>
                                    <span class="duoxuan-five-chuchuangR-W">{{ businessForm.windowRightWidth }}</span>
                                    <span class="duoxuan-five-chuchuangR-H">{{ businessForm.windowRightHeight }}</span>
                                    <span class="duoxuan-five-chuchuangboli-W">{{ businessForm.windowWidth }}</span>
                                    <span class="duoxuan-five-chuchuangboli-H">{{ businessForm.windowHeight }}</span>
                                    <span class="duoxuan-five-chuchuangb-W">{{ businessForm.windowBottomWidth }}</span>
                                    <span class="duoxuan-five-chuchuangb-H">{{ businessForm.windowBottomHeight }}</span>
                                </div>

                                <!-- 多选-6 -->
                                <div v-else-if="optionModel == '多选-多间门头'">
                                    <span class="duoxuan-six-fangshuiW">{{ businessForm.waterproofWidth }}</span>
                                    <span class="duoxuan-six-fangshuiH">{{ businessForm.waterproofHeight }}</span>
                                    <span class="duoxuan-six-zuoceW">{{ businessForm.leftWidth }}</span>
                                    <span class="duoxuan-six-zuoceH">{{ businessForm.leftHeight }}</span>
                                    <span class="duoxuan-six-yuoceW">{{ businessForm.rightWidth }}</span>
                                    <span class="duoxuan-six-yuoceH">{{ businessForm.rightHeight }}</span>
                                    <span class="duoxuan-six-zhengmianW">{{ businessForm.frontWidth }}</span>
                                    <span class="duoxuan-six-zhengmianH">{{ businessForm.frontHeight }}</span>
                                    <span class="duoxuan-six-xiadiW">{{ businessForm.bottomWidth }}</span>
                                    <span class="duoxuan-six-xiadiH">{{ businessForm.bottomHeight }}</span>
                                    <span class="duoxuan-six-menmeiW">{{ businessForm.doorWidth }}</span>
                                    <span class="duoxuan-six-menmeiH">{{ businessForm.doorHeight }}</span>
                                    <span class="duoxuan-six-baozhu1W">{{ businessForm.columnOneWidth }}</span>
                                    <span class="duoxuan-six-baozhu1H">{{ businessForm.columnOneHeight }}</span>
                                    <span class="duoxuan-six-baozhu2W">{{ businessForm.columnTwoWidth }}</span>
                                    <span class="duoxuan-six-baozhu2H">{{ businessForm.columnTwoHeight }}</span>
                                    <span class="duoxuan-six-baozhu3W">{{ businessForm.columnThreeWidth }}</span>
                                    <span class="duoxuan-six-baozhu3H">{{ businessForm.columnThreeHeight }}</span>
                                    <span class="duoxuan-six-baozhu4W">{{ businessForm.columnFourWidth }}</span>
                                    <span class="duoxuan-six-baozhu4H">{{ businessForm.columnFourHeight }}</span>
                                    <span class="duoxuan-six-baozhu5W">{{ businessForm.columnFiveWidth }}</span>
                                    <span class="duoxuan-six-baozhu5H">{{ businessForm.columnFiveHeight }}</span>
                                    <span class="duoxuan-six-baozhu6W">{{ businessForm.columnSixWidth }}</span>
                                    <span class="duoxuan-six-baozhu6H">{{ businessForm.columnSixHeight }}</span>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>
                <div class="materialList">
                    <h4>生动化数据</h4>
                    <div class="materialList-box" v-for="(v, index) in materialList" :key="index">
                        <div class="navBox">
                            <p class="indexHao">第{{ index + 1 }}项</p>
                            <!-- <p class="iconfontP iconfontPAdd"><i class="iconfont icon-zengjiatianjiajiahao"
                                    @click="addMaterial(v)"></i></p>
                            <p class="iconfontP iconfontPDelite" v-if="businessForm.materialList.length > 1 || index !== 0"><i
                                    class="iconfont icon-shanchu3" @click="deleteMaterial(index)"
                                    v-show="businessForm.materialList.length > 1 || index !== 0"></i></p> -->
                        </div>
                        <div class="materialList-input-box">
                            <el-form-item label="业务类型" prop="businessType">
                                <el-select v-model="v.businessType" placeholder="请选择业务类型" :disabled="true">
                                    <el-option v-for="item in selectBusiness" :key="item.label" :label="item.label"
                                        :value="item.label" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="存货名称" prop="productId">
                                <el-select v-model="v.productId" placeholder="请选择存货名称" :disabled="true"
                                    @change="productChange($event, index)">
                                    <el-option v-for="item in stocksData" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                            <el-form-item label="单位与数量" prop="totalQuantity" class="config">
                                <el-input v-model="v.totalQuantity" placeholder="请输入单位与数量" />
                                <p class="unit">{{ v.unit || '待定' }}</p>
                            </el-form-item>
                            <el-form-item label="长度" prop="materialHeight" class="config">
                                <el-input v-model="v.materialHeight" placeholder="请输入长度" :disabled="true" />
                                <p class="unit">m</p>
                            </el-form-item>
                            <el-form-item label="宽度" prop="materialWidth" class="config">
                                <el-input v-model="v.materialWidth" placeholder="请输入宽度" :disabled="true" />
                                <p class="unit">m</p>
                            </el-form-item>
                            <el-form-item label="件数" prop="quantityPerPiece">
                                <el-input v-model="v.quantityPerPiece" placeholder="请输入件数" :disabled="true" />
                            </el-form-item>
                            <el-form-item label="设计元素" prop="materialDesignElements" class="materialDesignElements">
                                <el-input v-model="v.materialDesignElements" placeholder="请输入设计元素" :disabled="true" />
                            </el-form-item>
                            <el-form-item label="备注" prop="materialRemark" class="materialRemark">
                                <el-input v-model="v.materialRemark" placeholder="请输入备注" :disabled="true" />
                            </el-form-item>
                        </div>

                        <!-- 
                    <el-form-item label="材质与尺寸" prop="materialList">
                        <el-input v-model="v" type="textarea" placeholder="请输入材料与尺寸" />
                    </el-form-item> -->
                    </div>
                </div>

                <div class="materialImage">
                    <h4>生动化图片补充</h4>
                    <div class="img-box" v-if="businessForm.materialImage">
                        <el-image :src="item" v-for="(item, index) in businessForm.materialImage" :key="index"
                            :preview-src-list="[item]">
                        </el-image>
                    </div>
                    <div class="notImage" v-else>
                        暂无图片
                    </div>
                </div>

                <el-form-item class="btn-box">
                    <el-button @click="resetForm(ruleFormRef)" style="background:#F2F3F5" :disabled="true">重置</el-button>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        提交
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import TableCom from '@/components/table/common'
import ImageUpload from '@/components/ImageUpload'
import { designMeasurement } from '@/api/costSum'
import { getproductsApi } from '@/api/tickets'

import { getEmployeeApi, getWorkApi } from '@/api/tickets'
import { checkPermi } from "@/utils/permission.js";
const { proxy } = getCurrentInstance();

// 回显的数据
let modelValue = ref([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
let optionModelData = ref(true)
// 存放的设计及图
let designDrawings = reactive([])
// 获取的图片
const handlerModelValue = (v) => {
    designDrawings = v
}
let stocksData = ref([])
let selectBusiness = ref([
    {
        label: '物料类',
        index: 0
    },
    {
        label: '门头',
        index: 1
    },
    {
        label: '装修类',
        index: 2
    },
    {
        label: '活动类',
        index: 3
    },
    {
        label: '其他',
        index: 4
    },
])
const emit = defineEmits(['goBack', 'clearMeasurement'])
const props = defineProps(['deviseList'])
// 图片类型
let fileType = ["png", "jpg", "jpeg", "jfif"]
let ruleFormRef = ref(null)
// 模板名称 modelName
let optionModel = ref('固定-单片')
let optionModelUrl = ref(new URL('@/assets/images/modelImage/guiding/1.[w131.00cm×h42.76cm].png', import.meta.url).href)
let optionModelList = reactive([
    {
        imageUrl: new URL('@/assets/images/modelImage/guiding/1.[w131.00cm×h42.76cm].png', import.meta.url).href,
        imageName: '固定-单片',
        id: '固定-单片'
    },
    {
        imageUrl: new URL('@/assets/images/modelImage/guiding/2.[w173.92cm×h58.66cm].png', import.meta.url).href,
        imageName: '固定-四周厚度无包柱',
        id: '固定-四周厚度无包柱'
    },
    {
        imageUrl: new URL('@/assets/images/modelImage/guiding/3.[w165.51cm×h128.03cm].png', import.meta.url).href,
        imageName: '固定-四周厚度+两个包柱',
        id: '固定-四周厚度+两个包柱'
    },
    {
        imageUrl: new URL('@/assets/images/modelImage/duoxuan/4.[w167.80cm×h130.18cm].png', import.meta.url).href,
        imageName: '多选-门头含包柱',
        id: '多选-门头含包柱'
    },
    {
        imageUrl: new URL('@/assets/images/modelImage/duoxuan/5.[w167.80cm×h130.37cm].png', import.meta.url).href,
        imageName: '多选-门头含橱窗',
        id: '多选-门头含橱窗'
    },
    {
        imageUrl: new URL('@/assets/images/modelImage/duoxuan/6.[w167.80cm×h130.18cm].png', import.meta.url).href,
        imageName: '多选-多间门头',
        id: '多选-多间门头'
    },
])
const materialList = ref([{
    businessType: '',
    totalQuantity: '',
    materialHeight: '',
    materialWidth: '',
    quantityPerPiece: '',
    materialDesignElements: '',
    materialRemark: '',
}])

let customerList = reactive([

])
let businessForm = reactive({
    terminalName: '',
    customerName: '',
    manufacturerContact: '',
    businessSurveyor: '',
    businessSurveyorName: '',
    surveyDate: '',
    designElements: '',
    installer: '',
    terminalName: '',
    terminalPhone: '',
    urbanManagementReport: '',
    detailedAddress: '',
    mainLineDistance: '',
    a: '',
    shopEnvironment: '',
    shopRadio: "0",
    other: '',


    waterproofHeight: '',
    waterproofWidth: '',
    leftHeight: '',
    leftWidth: '',
    windowHeight: '',
    windowWidth: '',
    windowTopWidth: '',
    windowTopHeight: '',
    windowLeftWidth: '',
    windowLeftHeight: '',
    windowRightWidth: '',
    windowRightHeight: '',
    windowBottomWidth: '',
    windowBottomHeight: '',
    rightHeight: '',
    rightWidth: '',
    frontHeight: '',
    frontWidth: '',
    bottomHeight: '',
    bottomWidth: '',
    doorHeight: '',
    doorWidth: '',
    columnOneHeight: '',
    columnOneWidth: '',
    columnTwoHeight: '',
    columnTwoWidth: '',
    columnThreeHeight: '',
    columnThreeWidth: '',
    columnFourHeight: '',
    columnFourWidth: '',
    columnFiveHeight: '',
    columnFiveWidth: '',
    columnSixHeight: '',
    columnSixWidth: '',

    materialImage: ''
})

const rules = reactive({
    terminalPhone: {
        pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur'
    },
    terminalName: [
        {
            required: true,
            message: '终端名称',
            trigger: 'change',
        }
    ],
    customerName: [
        {
            required: true,
            message: '客户名称',
            trigger: 'change',
        }
    ],
    // manufacturerContact: [
    //     {
    //         required: true,
    //         message: '厂家负责人',
    //         trigger: 'change',
    //     }
    // ],
    // businessSurveyor: [
    //     {
    //         required: true,
    //         message: '经营测量人员',
    //         trigger: 'change',
    //     }
    // ],
    surveyDate: [
        {
            required: true,
            message: '测量日期',
            trigger: 'change',
        }
    ],
    designerList: [
        {
            required: true,
            message: '设计人员',
            trigger: 'change',
        }
    ],
    designElements: [
        {
            required: true,
            message: '设计元素',
            trigger: 'change',
        }
    ],
    terminalPhone: [
        {
            required: true,
            message: '终端电话',
            trigger: 'change',
        }
    ],
})
// 表格数据
let dataTable = ref([
    {
        businessType: null,   //业务类型
        productId: null,    // 存货名称
        productionContent: null,       // 制作内容
        width: null,     // 宽
        height: null,     // 高
        quantityPerPiece: 1,     // 件数
        totalQuantity: 1,          // 数量
        unit: 0,           //单位
        salePrice: 0,         // 销售单价
        price: 0,
        amount: 0,          // 金额
        salePriceAll: 0,         // 销售单价
        prepayment: 0,        // 预收款
        materialFee: 0,  //  材料费
        installationFee2: 0,    // 安装费(按天)
        installationFee: 0,    // 安装费
        urbanManagementFee: 0,  // 城管费
        outsourcingId: [],   //外协商
        costCategory: null,       // 成本类型
        budgetCost: 0,         // 预算成本
        actualCost: 0,         // 实际成本
    },
    {
        businessType: null,   //业务类型
        productId: null,    // 存货名称
        productionContent: null,       // 制作内容
        width: null,     // 宽
        height: null,     // 高
        quantityPerPiece: 1,     // 件数
        totalQuantity: 1,          // 数量
        unit: 0,           //单位
        salePrice: 0,         // 销售单价
        price: 0,
        amount: 0,          // 金额
        salePriceAll: 0,         // 销售单价
        prepayment: 0,        // 预收款
        materialFee: 0,  //  材料费
        installationFee2: 0,    // 安装费(按天)
        installationFee: 0,    // 安装费
        urbanManagementFee: 0,  // 城管费
        outsourcingId: [],   //外协商
        costCategory: null,       // 成本类型
        budgetCost: 0,         // 预算成本
        actualCost: 0,         // 实际成本
    },
    {
        businessType: null,   //业务类型
        productId: null,    // 存货名称
        productionContent: null,       // 制作内容
        width: null,     // 宽
        height: null,     // 高
        quantityPerPiece: 1,     // 件数
        totalQuantity: 1,          // 数量
        unit: 0,           //单位
        salePrice: 0,         // 销售单价
        price: 0,
        amount: 0,          // 金额
        salePriceAll: 0,         // 销售单价
        prepayment: 0,        // 预收款
        materialFee: 0,  //  材料费
        installationFee2: 0,    // 安装费(按天)
        installationFee: 0,    // 安装费
        urbanManagementFee: 0,  // 城管费
        outsourcingId: [],   //外协商
        costCategory: null,       // 成本类型
        budgetCost: 0,         // 预算成本
        actualCost: 0,         // 实际成本
    },
])
// 创建一行表格
const createTable = (data) => {
    dataTable.value.push(data)
}
// 删除一行表格
const deleteRow = (v) => {
    dataTable.value.splice(v.$index, 1)
}

watch(() => optionModel.value, (val) => {
    switch (val) {
        case '固定-单片':
            optionModelUrl.value = new URL('@/assets/images/modelImage/guiding/1.[w131.00cm×h42.76cm].png', import.meta.url).href

            break;
        case '固定-四周厚度无包柱':
            optionModelUrl.value = new URL('@/assets/images/modelImage/guiding/2.[w173.92cm×h58.66cm].png', import.meta.url).href

            break;
        case '固定-四周厚度+两个包柱':
            optionModelUrl.value = new URL('@/assets/images/modelImage/guiding/3.[w165.51cm×h128.03cm].png', import.meta.url).href

            break;
        case '多选-门头含包柱':
            optionModelUrl.value = new URL('@/assets/images/modelImage/duoxuan/4.[w167.80cm×h130.18cm].png', import.meta.url).href

            break;
        case '多选-门头含橱窗':
            optionModelUrl.value = new URL('@/assets/images/modelImage/duoxuan/5.[w167.80cm×h130.37cm].png', import.meta.url).href

            break;
        case '多选-多间门头':
            optionModelUrl.value = new URL('@/assets/images/modelImage/duoxuan/6.[w167.80cm×h130.18cm].png', import.meta.url).href

            break;

        default:
            break;
    }
})
// 返回
const goBack = () => {
    emit('goBack')
}
// 提交成功
const designMeasurementFn = async (params) => {
    let { code, msg } = await designMeasurement(params)
    if (code == 200) {
        proxy.$modal.msgSuccess(msg);
        emit('uploadSuccess')
    }
}

// 获取客户下拉菜单数据
const getWorkApiData = async (v = '') => {
    let params = { customerName: v }
    let { code, data } = await getWorkApi(params)
    if (code == 200) {
        data.forEach(v => {
            customerList.push({
                label: v.primaryClassification + '/' + v.customerName,
                value: v.customerId
            })
        });
    }
}
// 提交
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            let params = {
                id: businessForm.id,
                designDrawings: JSON.stringify(designDrawings),
                productionItem: JSON.stringify(dataTable.value)
            }
            designMeasurementFn(JSON.stringify(params))
        } else {
            console.log('error submit!', fields)
        }
    })
}
let urbanManagementReportList = reactive([
    {
        label: '报备',
        value: '报备'
    },
    {
        label: '未报备',
        value: '未报备'
    },
    {
        label: '无需报备',
        value: '无需报备'
    },
    {
        label: '其他',
        value: '其他'
    },
])
const productChange = (v, index) => {
    stocksData.value.forEach((e, i) => {
        if (e.value == v) {
            materialList.value[index].unit = e.unit
        }
    })
}
// 获取存货下拉菜单数据
const getproductsApiData = async (v = '') => {
    let params = { deptName: v }
    let res = await getproductsApi(params)
    let { code, data } = res
    if (code == 200) {
        stocksData.value = data.map(v => {
            return {
                lable: v.productId,
                value: v.productName,
                unit: v.unit
            }
        })
    }
}
// 重置 
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}

const callbackFn = () => {
    for (const key in businessForm) {
        businessForm[key] = props.deviseList[key]
    }
    let arrBusinessSurveyor = [JSON.parse(props.deviseList.businessSurveyor)] || []
    let arrDesigner = [JSON.parse(props.deviseList.designer)] || []
    businessForm.businessSurveyor = arrBusinessSurveyor.map(String)
    materialList.value = JSON.parse(props.deviseList.materialList)
    businessForm.designerList = arrDesigner.map(String)
    businessForm.id = props.deviseList.id
    businessForm.shopRadio = props.deviseList.shopRadio
    businessForm.materialImage = JSON.parse(props.deviseList.materialImage)

    optionModelData.value = false
    optionModel.value = props.deviseList.type

    emit('clearMeasurement')
}

// 计算材料安装城管费
const stopWatch = watch(() => dataTable.value, (val) => {
    val.forEach(v => {
        // 面积
        if (v.unit == '平方米' || v.unit == '平方') {
            v.totalQuantity = parseFloat(Number(v.width * v.height * Number(v.quantityPerPiece)).toFixed(8))
        }
        if (v.unit == '个' || v.unit == '套' || v.unit == '张' || v.unit == '份' || v.unit == '项' || v.unit == '包') {
            if (!Number.isInteger(Number(v.totalQuantity))) {
                v.classErrorBorder = true
            }
        } else {
            v.classErrorBorder = false
        }
        // 面积
        // 销售金额
        v.amount = Number(Number((v.totalQuantity * v.salePrice)).toFixed(2))
        // 成本金额
        v.salePriceAll = Number(Number((v.totalQuantity * v.price)).toFixed(2))
 
        v.budgetCost = Number((Number(v.materialFee) + Number(v.salePriceAll)).toFixed(2))
    })
}, {
    deep: true,
    immediate: true
})

// 导入的表格数据
const excelTable = (data) => {
    data.forEach(v => {
        console.log(v);
        dataTable.value.push(v)
    })
}
const callProductionItemFn = ()=>{
    dataTable.value = JSON.parse(props.deviseList.productionItem)
}
onUnmounted(() => {
    stopWatch();
});
onMounted(() => {
    getWorkApiData()
    getproductsApiData()

    if (props.deviseList) {
        callbackFn()
    }
    if(JSON.parse(props.deviseList.productionItem)){
        callProductionItemFn()
    }
})
</script>

<style scoped lang="scss">
.designupdate {
    padding: 20px;
    box-sizing: border-box;
    background-color: #F7F8FA;


    .designupdate-header {
        background-color: #fff;
        padding: 20px;

        h4 {
            font-weight: 550;
            margin-bottom: 20px;

            .iconfont {
                border-radius: 50%;
                padding: 5px;
                transition: all .3s;

                &:hover {
                    background-color: #1947FF;
                    color: #fff;
                }
            }
        }

        .upload {
            padding: 20px;
            background-color: #F2F3F5;
        }

        .uploadMask {
            background-color: #F2F3F5;

        }
    }

    .business {


        :deep(.el-form) {
            width: 100%;
            max-width: 100% !important;

            .el-input__wrapper {
                background: #F2F3F5;
                box-shadow: none;
            }

            .el-form-item {
                display: flex;
                flex-direction: column;
            }

            .config {
                .el-form-item__content {
                    display: flex;
                    align-items: center;
                    flex-wrap: nowrap;

                    .el-input {
                        width: 87%;
                    }

                    .unit {
                        background-color: #F2F3F5;
                        width: 13%;
                        text-align: center;
                    }

                    .el-input__wrapper {
                        border-radius: 0px;
                        border-right: 1px solid #dbdbdb;
                    }
                }
            }

            .business-form {
                background-color: #fff;
                padding: 20px;

                h4 {
                    padding-bottom: 20px;
                    font-weight: 550;

                    .iconfont {
                        border-radius: 50%;
                        padding: 5px;
                        transition: all .3s;

                        &:hover {
                            background-color: #1947FF;
                            color: #fff;
                        }
                    }
                }

                .form-box {
                    width: 100%;
                    display: flex;
                    flex-wrap: wrap;

                    .shopRadio {
                        flex-direction: none;

                        .el-form-item__content {
                            margin: 0 !important;
                        }
                    }

                    .el-form-item {
                        margin-right: 40px;
                        width: 342px;

                        .el-form-item__label-wrap {
                            margin: 0 !important;
                        }


                        .el-form-item__content {
                            width: 100%;

                            .el-select,
                            .el-input {
                                width: 100%;
                            }
                        }
                    }

                    .is-disabled {
                        .el-input__wrapper {
                            color: #eeeeee;
                        }
                    }



                    .shopEnvironment {
                        .el-form-item__content {
                            display: flex;
                            align-items: center;
                            flex-wrap: nowrap;

                            .shopEnvironmentLable {
                                background-color: #F2F3F5;
                                width: 32%;
                                text-align: center;
                            }

                            .el-input {
                                width: 55%;
                            }

                            .unit {
                                background-color: #F2F3F5;
                                width: 13%;
                                text-align: center;
                            }

                            .el-input__wrapper {
                                border-radius: 0px;
                                border-left: 1px solid #dbdbdb;
                                border-right: 1px solid #dbdbdb;
                            }
                        }
                    }

                    .terminalPhone {
                        .el-form-item__content {
                            display: flex;
                            align-items: center;
                            flex-wrap: nowrap;

                            .el-input {
                                width: 87%;
                            }

                            p {
                                background-color: #F2F3F5;
                                width: 13%;
                                text-align: center;
                            }

                            .el-input__wrapper {
                                border-radius: 0px;
                                border-left: 1px solid #dbdbdb;
                            }
                        }
                    }


                }

            }

            .structuralDiagram {
                background-color: #fff;
                padding: 20px;
                margin-top: 16px;

                .title {
                    padding-bottom: 20px;
                    display: flex;
                    align-items: center;

                    h4 {
                        font-weight: 550;
                        margin-right: 10px;
                    }

                    span {
                        color: #ccc;
                    }
                }

                .form-box {
                    display: flex;
                    align-items: center;
                    flex-wrap: wrap;

                    .el-form-item {
                        margin-right: 40px;
                        width: 164px;

                        .el-form-item__label-wrap {
                            margin: 0 !important;
                        }

                        .el-input__wrapper {
                            background: #F2F3F5;
                        }

                        .el-form-item__content {
                            width: 100%;

                            .el-input {
                                width: 72%;
                            }

                            .unit {
                                width: 28%;
                            }
                        }
                    }
                }

            }

            .optionModel {
                .el-form-item {
                    width: 100% !important;
                }

                .el-form-item__content,
                .el-select,
                .el-input {
                    width: 100% !important;
                }

                .el-form-item__label-wrap {
                    margin: 0 !important;
                }

                .modleimage {
                    width: 40%;
                    height: 40%;
                    margin: 0 auto;
                    position: relative;

                    .el-image {
                        width: 100%;
                        height: 100%;
                    }

                    span {
                        position: absolute;
                        font-size: 12px;
                        color: red;
                        font-weight: 550;
                    }

                    .guding-one-zhengmianW {
                        top: 9%;
                        left: 47%;
                    }

                    .guding-one-zhengmianH {
                        left: 1%;
                        bottom: 52%;
                    }

                    .guding-two-fangshuiW {
                        left: 49%;
                        top: 0%;
                    }

                    .guding-two-fangshuiH {
                        left: 14%;
                        bottom: 78%;
                    }

                    .guding-two-zuoceW {
                        left: 11%;
                        bottom: 71%;
                    }

                    .guding-two-zuoceH {
                        left: 6%;
                        bottom: 47%;
                    }

                    .guding-two-zhengmianW {
                        left: 49%;
                        bottom: 70%;
                    }

                    .guding-two-zhengmianH {
                        left: 15%;
                        bottom: 49%;
                    }

                    .guding-two-youceW {
                        left: 87%;
                        bottom: 72%;

                    }

                    .guding-two-youceH {
                        left: 92%;
                        bottom: 47%;
                    }

                    .guding-two-xiaceW {
                        left: 49%;
                        bottom: 31%;
                    }

                    .guding-two-xiaceH {
                        left: 17%;
                        bottom: 20%;
                    }


                    .guding-three-fangshuiW {
                        left: 50%;
                        bottom: 91%;
                    }

                    .guding-three-fangshuiH {
                        left: 13%;
                        bottom: 86%;
                    }

                    .guding-three-zhengmianW {
                        left: 50%;
                        bottom: 82%;
                    }

                    .guding-three-zhengmianH {
                        left: 14%;
                        bottom: 72%;
                    }

                    .guding-three-zuoceH {
                        left: 4%;
                        bottom: 72%;
                    }

                    .guding-three-zuoceW {
                        left: 9%;
                        bottom: 62%;
                    }

                    .guding-three-youceW {
                        left: 90%;
                        bottom: 62%;
                    }

                    .guding-three-youceH {
                        left: 94%;
                        bottom: 71%;
                    }

                    .guding-three-xiadiH {
                        left: 16%;
                        bottom: 58%;
                    }

                    .guding-three-xiadiW {
                        left: 50%;
                        bottom: 64%;
                    }

                    .guding-three-menmeiW {
                        left: 50%;
                        bottom: 48%;
                    }

                    .guding-three-menmeiH {
                        left: 18%;
                        bottom: 53%;
                    }

                    .guding-three-baozhuH {
                        left: 18%;
                        bottom: 30%;
                    }

                    .guding-three-baozhuW {
                        left: 22%;
                        bottom: 8%;
                    }

                    .guding-three-baozhu2W {
                        left: 77%;
                        bottom: 8%;
                    }

                    .guding-three-baozhu2H {
                        left: 82%;
                        bottom: 29%;
                    }

                    // 多选样式
                    .duoxuan-four-fangshuiW {
                        left: 48%;
                        bottom: 89%;
                    }

                    .duoxuan-four-fangshuiH {
                        left: 10%;
                        bottom: 85%;
                    }

                    .duoxuan-four-zhengmianW {
                        left: 48%;
                        bottom: 76%;
                    }

                    .duoxuan-four-zhengmianH {
                        left: 18%;
                        bottom: 71%;
                    }

                    .duoxuan-four-zuoceH {
                        left: 2%;
                        bottom: 71%;
                    }

                    .duoxuan-four-zuoceW {
                        left: 8%;
                        bottom: 60%;
                    }

                    .duoxuan-four-youceW {
                        left: 87%;
                        bottom: 60%;
                    }

                    .duoxuan-four-youceH {
                        left: 94%;
                        bottom: 70%;
                    }

                    .duoxuan-four-xiadiH {
                        left: 14%;
                        bottom: 56%;
                    }

                    .duoxuan-four-xiadiW {
                        left: 43%;
                        bottom: 59%;
                    }

                    .duoxuan-four-menmeiW {
                        left: 49%;
                        bottom: 47%;
                    }

                    .duoxuan-four-menmeiH {
                        left: 16%;
                        bottom: 52%;
                    }

                    .duoxuan-four-baozhuH {
                        left: 15%;
                        bottom: 29%;
                    }

                    .duoxuan-four-baozhuW {
                        left: 21%;
                        bottom: 5%;
                    }

                    .duoxuan-four-baozhu2W {
                        left: 75%;
                        bottom: 6%;
                    }

                    .duoxuan-four-baozhu2H {
                        left: 81%;
                        bottom: 27%;
                    }

                    // 多选五
                    .duoxuan-five-fangshuiW {
                        left: 50%;
                        bottom: 91%;
                    }

                    .duoxuan-five-fangshuiH {
                        left: 12%;
                        bottom: 85%;
                    }

                    .duoxuan-five-zhengmianW {
                        left: 48%;
                        bottom: 76%;
                    }

                    .duoxuan-five-zhengmianH {
                        left: 19%;
                        bottom: 71%;
                    }

                    .duoxuan-five-zuoceH {
                        left: 4%;
                        bottom: 71%;
                    }

                    .duoxuan-five-zuoceW {
                        left: 10%;
                        bottom: 61%;
                    }

                    .duoxuan-five-youceW {
                        left: 89%;
                        bottom: 61%;
                    }

                    .duoxuan-five-youceH {
                        left: 95%;
                        bottom: 71%;
                    }

                    .duoxuan-five-xiadiH {
                        left: 16%;
                        bottom: 56%;

                    }

                    .duoxuan-five-xiadiW {
                        left: 43%;
                        bottom: 59%;
                    }

                    .duoxuan-five-menmeiW {
                        left: 57%;
                        bottom: 52%;
                    }

                    .duoxuan-five-menmeiH {
                        left: 18%;
                        bottom: 52%;
                    }

                    .duoxuan-five-baozhuH {
                        left: 15%;
                        bottom: 29%;
                    }

                    .duoxuan-five-baozhuW {
                        left: 21%;
                        bottom: 6%;
                    }

                    .duoxuan-five-baozhu3W {
                        left: 77%;
                        bottom: 6%;
                    }

                    .duoxuan-five-baozhu3H {
                        left: 83%;
                        bottom: 29%;
                    }

                    .duoxuan-five-baozhu2H {
                        left: 57%;
                        bottom: 29%;
                    }

                    .duoxuan-five-baozhu2W {
                        left: 51%;
                        bottom: 7%;
                    }

                    .duoxuan-five-chuchuangT-W {
                        left: 41%;
                        bottom: 47%;
                    }

                    .duoxuan-five-chuchuangT-H {
                        left: 27%;
                        bottom: 47%;
                    }

                    .duoxuan-five-chuchuangL-W {
                        left: 26%;
                        bottom: 42%;
                    }

                    .duoxuan-five-chuchuangL-H {
                        left: 25%;
                        bottom: 31%;
                    }

                    .duoxuan-five-chuchuangR-W {
                        left: 47%;
                        bottom: 42%;
                    }

                    .duoxuan-five-chuchuangR-H {
                        left: 47%;
                        bottom: 31%;
                    }

                    .duoxuan-five-chuchuangboli-W {
                        left: 36%;
                        bottom: 19%;
                    }

                    .duoxuan-five-chuchuangboli-H {
                        left: 41%;
                        bottom: 31%;
                    }

                    .duoxuan-five-chuchuangb-W {
                        left: 36%;
                        bottom: 12%;
                    }

                    .duoxuan-five-chuchuangb-H {
                        left: 27%;
                        bottom: 13%;
                    }

                    // 多选-6
                    .duoxuan-six-fangshuiW {
                        left: 50%;
                        bottom: 91%;
                    }

                    .duoxuan-six-fangshuiH {
                        left: 12%;
                        bottom: 86%;
                    }

                    .duoxuan-six-zuoceW {
                        left: 9%;
                        bottom: 63%;
                    }

                    .duoxuan-six-zuoceH {
                        left: 3%;
                        bottom: 73%;
                    }

                    .duoxuan-six-yuoceW {
                        left: 90%;
                        bottom: 63%;
                    }

                    .duoxuan-six-yuoceH {
                        left: 96%;
                        bottom: 73%;
                    }

                    .duoxuan-six-zhengmianW {
                        left: 49%;
                        bottom: 78%;
                    }

                    .duoxuan-six-zhengmianH {
                        left: 19%;
                        bottom: 73%;
                    }

                    .duoxuan-six-xiadiW {
                        left: 45%;
                        bottom: 60%;
                    }

                    .duoxuan-six-xiadiH {
                        left: 13%;
                        bottom: 59%;
                    }

                    .duoxuan-six-menmeiW {
                        left: 36%;
                        bottom: 54%;
                    }

                    .duoxuan-six-menmeiH {
                        left: 15%;
                        bottom: 54%;
                    }

                    .duoxuan-six-baozhu1W {
                        left: 19%;
                        bottom: 6%;
                    }

                    .duoxuan-six-baozhu1H {
                        left: 13%;
                        bottom: 30%;
                    }

                    .duoxuan-six-baozhu2W {
                        left: 31%;
                        bottom: 6%;
                    }

                    .duoxuan-six-baozhu2H {
                        left: 26%;
                        bottom: 30%;
                    }

                    .duoxuan-six-baozhu3W {
                        left: 42%;
                        bottom: 6%;
                    }

                    .duoxuan-six-baozhu3H {
                        left: 37%;
                        bottom: 30%;
                    }

                    .duoxuan-six-baozhu4W {
                        left: 54%;
                        bottom: 6%;
                    }

                    .duoxuan-six-baozhu4H {
                        left: 49%;
                        bottom: 30%;
                    }

                    .duoxuan-six-baozhu5W {
                        left: 68%;
                        bottom: 6%;
                    }

                    .duoxuan-six-baozhu5H {
                        left: 63%;
                        bottom: 30%;
                    }

                    .duoxuan-six-baozhu6W {
                        left: 79%;
                        bottom: 6%;
                    }

                    .duoxuan-six-baozhu6H {
                        left: 83%;
                        bottom: 30%;
                    }
                }
            }



            .materialList {
                background-color: #fff;
                padding: 20px;
                margin-top: 20px;

                h4 {
                    padding-bottom: 20px;
                    font-weight: 550;
                }

                .el-form-item__label-wrap {
                    margin: 0 !important;
                }

                .el-textarea__inner {
                    background-color: #F2F3F5;
                    min-height: 120px !important;
                }

                .materialList-box {
                    .navBox {
                        border-top: 1px solid #E5E6EB;
                        position: relative;
                        margin: 30px 0;

                        .indexHao {
                            height: 20px;
                            width: 80px;
                            background-color: #fff;
                            position: absolute;
                            text-align: center;
                            top: -10px;
                            left: 50px;
                            font-weight: 550;
                        }

                        .iconfontP {
                            background-color: #fff;
                            text-align: center;
                            width: 80px;
                            position: absolute;
                            height: 20px;

                        }

                        .iconfontPAdd {
                            top: -12px;
                            right: 150px;
                            color: #165DFF;
                        }

                        .iconfontPDelite {
                            top: -12px;
                            right: 50px;
                            color: #F53F3F;
                        }

                        .icon-shanchu3 {
                            font-weight: 600;
                        }

                        .iconfont {
                            font-size: 24px;

                        }
                    }

                    .materialList-input-box {
                        display: grid;
                        grid-template-columns: repeat(5, 1fr);
                        grid-template-rows: repeat(2, 1fr);
                        gap: 0px 20px;

                        .materialDesignElements {
                            grid-column-start: 2;
                            grid-column-end: 4;
                        }

                        .materialRemark {
                            grid-column-start: 4;
                            grid-column-end: 6;
                        }
                    }
                }
            }

            .materialImage {
                background-color: #FFFFFF;
                padding: 20px;
                margin-top: 20px;

                h4 {
                    padding-bottom: 20px;
                    font-weight: 550;
                }

                .img-box {
                    display: flex;
                    align-items: center;
                    justify-content: space-around;

                    .el-image {
                        height: 200px;
                        width: 300px;
                    }
                }

                .notImage {
                    padding: 80px;
                    color: #333;
                    background-color: #ccc;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }

            .btn-box {
                position: sticky;
                bottom: 0;
                left: 0;
                right: 0;
                padding-right: 40px;
                background-color: #FFFFFF;
                box-shadow: 0px -3px 12px 0px rgba(0, 0, 0, 0.10);
                height: 60px;
            }
        }
    }
}
</style>
